<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="Demo4_Function.js" type="text/javascript"></script>
    <link rel="stylesheet" href="./Demo4.css" type="text/css">
    <title>Demo4</title>
</head>

<body>
    <div>
        <button id="browser">Browser Info</button>
        <button id="back">Go Back</button><br /><br />
        <span id="output"></span>
    </div>

    <div>
        <h1>Tip Calculator</h1>
        $<input id="subtotal" type="text" size="5" /> subtotal
        <br />
        <button id="tenpercent">10%</button>
        <button id="fifteenpercent">15%</button>
        <button id="eighteenpercent">18%</button>
        <span id="total"></span>
    </div>

    <div>
        <p id="lyrics">
            Never gonna give you up <br /> Never gonna let you down <br /> Never gonna run around and desert you <br /> Never gonna make you cry <br /> Never gonna say goodbye <br /> Never gonna tell a lie and hurt you
        </p>
        <div>
            Font:
            <label><input id="serif" type="radio" name="font" checked="checked" />Serif</label>
            <label><input id="fantasy" type="radio" name="font" />Fantasy</label>
            <label><input id="monospace" type="radio" name="font" />Monospace</label>
        </div>
        <div>
            Font Size:
            <button id="enlarge">Enlagre</button>
            <button id="reduce">Reduce</button>
        </div>
        <div>
            Style:
            <label><input id="bold" type="checkbox" /> Bold</label>
            <label><input id="italic" type="checkbox" /> Italic</label>
        </div>
    </div>

    <div id="foo">
        <p>
            This is a paragraph of text with a
            <a href="http://www.baidu.com" target="_blank">link</a>.
            <button id="change">Change it</button>
        </p>
    </div>

    <!-- Searchable fan site HTML code -->
    <div id="main">
        <h3>Searchable Text</h3>
        <p>The Phoenix Suns are a professional basketball team based in Phoenix, Arizona. They are members of the ... </p>
        <p>The Suns have been generally successful since they began play as an expansion team in 1968. In forty years of play they have posted </p>
        <p id="last">On January 22, 1968, the NBA awarded expansion franchises to an ownership group from Phoenix and one from Milwaukee. ... </p>
        <ul>
            <li>Richard L. Bloch, investment broker/real estate developer and former Tucson resident;</li>
            <li>Karl Eller, outdoor advertising company owner and former Arizona football player;</li>
            <li>Donald Pitt, Tucson-based attorney;</li>
            <li>Don Diamond, Tucson-based real estate investor.</li>
        </ul>
    </div>
    <p>Page by Marty Stepp. <br /> Some (all) information taken from Wikipedia.</p>
    <hr />
    <div>
        Search for text:
        <input id="searchtext" type="text" />
        <button id="searchbutton">Search</button>
        <button id="addheading">Add a paragraph</button>
    </div>
</body>

</html>